import React, {useState} from 'react';
import "../css/Login.css"
import {Button, Checkbox, Form, Input, notification} from "antd";
import {httpPost} from "../../requests/requestClient.js";
import {useNavigate} from "react-router-dom";

const style_react_admin_background_image = {
    width: "100%",
    height: "100vh",
    position: "absolute"
}


const openNotification = () => {
    notification.open({
        message: 'Notification Title',
        description:
            'This is the content of the notification. This is the content of the notification. This is the content of the notification.',
        onClick: () => {
            console.log('Notification Clicked!');
        },
    });
};


/**
 * 登录
 *
 * @param username 用户名称
 * @param password 用户密码
 */
function LoginEvent(username, password, navigate) {
    console.log("login", username, password);
    httpPost("/v1/sys_user/useLogin", {username: username, password: password})
        .then(response => {
            navigate("/cms");
        })
}

function Login(props) {

    var [uname, setUsername] = useState("")
    var [pwd, setPassword] = useState("")
    const navigate = useNavigate();

    return (
        <div className={"full"}>
            <div className={"LoginForm"}>
                <div className={"LoginForm_right"}>
                    <div className={"Form_wrapper"}>
                        <div>
                            <b className={"APP_NAME"}>后台管理系统模板</b>
                        </div>
                        <Form
                            className={"form"}
                            name="basic"
                            initialValues={{remember: true}}

                            autoComplete="off"
                        >
                            <Form.Item
                                style={{width: "400px"}}
                                name="username"
                            >
                                <Input onChange={(e) => setUsername(e.target.value)} placeholder="用户名"/>
                            </Form.Item>

                            <Form.Item
                                name="password"
                                style={{width: "400px"}}
                            >
                                <Input onChange={(e) => setPassword(e.target.value)} placeholder="密码"/>
                            </Form.Item>

                            <div className={"forget_password"}>忘记密码</div>
                            <Button className={"loginBtn"} type="primary"
                                    onClick={(e) => {
                                        e.preventDefault();
                                        LoginEvent(uname, pwd, navigate)
                                    }}>
                                登录
                            </Button>
                        </Form>
                    </div>
                </div>
            </div>
        </div>
    );
}

export default Login;
